"use client"
import React, { useEffect, useState } from "react";
import { Button, Space, Table, TableProps, Popconfirm } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import baseInformationClass from "@/components/properties-panel-extension/components/index.module.css";
import RenderIconsCustom from "@/components/CustomIconSelector/conponents";

// 1. 明确子组件接收的props类型（类型约束，避免传错值）
interface MyComponentProps {
    bpmnInstance: any; // BPMN实例（备用，如后续需要）
    data: Array<{ id: string; name: string }>; // 父组件传递的消息数据
    EditClick: (record: { id: string; name: string }) => void; // 编辑回调
    onDelete: (record: { id: string; name: string }) => void; // 删除回调
}

const ProcessMessageView: React.FC<MyComponentProps> = (props) => {
    const { data, EditClick, onDelete } = props;
    const [dataSource, setDataSource] = useState<Array<{ id: string; name: string; key: string }>>([]);

    // 2. 初始化表格数据（父组件data变化时同步更新）
    useEffect(() => {
        // 为表格数据添加唯一key（AntD Table要求）
        const formattedData = data.map(item => ({
            ...item,
            key: item.id // 用BPMN元素的id作为key（唯一）
        }));
        setDataSource(formattedData);
    }, [data]); // 监听父组件data的变化

    // 3. 表格列配置
    const columns: TableProps<{ id: string; name: string; key: string }>['columns'] = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            width: '30%', // 固定宽度，避免表格错乱
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '40%',
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            fixed: 'right',
            width: '30%',
            render: (_: any, record) => (
                <Space size="middle">
                    {/* 4. 编辑按钮：触发父组件的EditClick */}
                    <Button
                        type="link"
                        size="small"
                        icon={<RenderIconsCustom icon="edit" />}
                        onClick={() => EditClick(record)} // 透传当前行数据
                    >
                        编辑
                    </Button>
                    {/* 5. 删除按钮：Popconfirm确认后触发父组件的onDelete */}
                    <Popconfirm
                        placement="top"
                        title="确认删除该消息吗？删除后不可恢复！"
                        okText="确认"
                        cancelText="取消"
                        onConfirm={() => onDelete(record)} // 确认后调用删除回调
                        // 取消时无需操作，移除原有的onCancel
                    >
                        <Button
                            type="link"
                            size="small"
                            icon={<DeleteOutlined />}
                            danger // 红色文字，提示危险操作
                        >
                            删除
                        </Button>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    return (
        <div className={baseInformationClass.listenerContainer}>
            {/* 6. 渲染表格：绑定数据源和列配置 */}
            <Table
                size="small" // 紧凑模式，节省空间
                dataSource={dataSource}
                columns={columns}
                pagination={{ 
                    pageSize: 5, // 每页显示5条，避免表格过长
                    showSizeChanger: false // 隐藏每页条数切换（简化操作）
                }}
                rowKey="key" // 明确rowKey，避免AntD警告
                bordered // 显示边框，提升可读性
            />
        </div>
    );
};

export default ProcessMessageView;